﻿@model Classified.Models.AutosModel

@{
    ViewBag.Title = "Autos";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">


@using (Html.BeginForm("Autos", "Ads", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmID" }))
{
    @Html.ValidationSummary(true)

    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.title)
            @Html.ValidationMessageFor(model => model.title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.subCategory)
        </div>
        <div class="editor-field">
            @Html.DropDownList("subCategory")
            @Html.ValidationMessageFor(model => model.subCategory)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.city)
        </div>
        <div class="editor-field">
           @* @Html.EditorFor(model => model.city)*@
            
            @Html.DropDownList( "city" )
            @Html.ValidationMessageFor(model => model.city)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.price)
            @Html.ValidationMessageFor(model => model.price)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.condition)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.condition)
            @Html.ValidationMessageFor(model => model.condition)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.description)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.description)
            @Html.ValidationMessageFor(model => model.description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.images)
        </div>
        <div class="editor-field">
             <div id="uploaders">
        <input type="file" id="fileToUpload"  name="fileUpload" multiple="multiple" style="float: left;" />
        <br />
        <span id="spnFile" style="float: left; color: #FF0000"></span>
        @Html.ValidationMessage("File")
        @Html.Hidden("images")
    </div>
            @Html.HiddenFor(model => model.images)
            @Html.ValidationMessageFor(model => model.images)
        </div>
          <div class="control-section" style="padding: 0px;">
        <div id="selectedFiles"></div>
    </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.warranty)
        </div>
        <div class="editor-field">
            @Html.DropDownList("warranty")
            @Html.ValidationMessageFor(model => model.warranty)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.userType)
        </div>
        <div class="editor-field">
            @Html.DropDownList("userType")
            @Html.ValidationMessageFor(model => model.userType)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.adType)
        </div>
        <div class="editor-field">
            @Html.DropDownList("adType")
            @Html.ValidationMessageFor(model => model.adType)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.address)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.address)
            @Html.ValidationMessageFor(model => model.address)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
    </div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

<script>
    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
    var files;
    var storedFiles = [];
    var upc = 0;

   

    $(function () {

        $(":file").attr('title', '  ');
        var $loading = $('#loadingDiv').hide();

        $("input[id^='fileToUpload']").change(function (e) {
            doReCreate(e);
        });

        selDiv = $("#selectedFiles");
    });


    function doReCreate(e) {
        upc = upc + 1;
        handleFileSelect(e);

        $("input[id^='fileToUpload']").hide();

        $('<input>').attr({
            type: 'file',
            multiple: 'multiple',
            id: 'fileToUpload' + upc,
            class: 'fUpload',
            name: 'fileUpload',
            style: 'float: left',
            title: '  ',
            onchange: "doReCreate(event)"

        }).appendTo('#uploaders');
    }


    function handleFileSelect(e) {

        //selDiv.innerHTML = ""; storedFiles = []; 
        selDiv = document.querySelector("#selectedFiles");

        if (!e.target.files) return;

        //selDiv.innerHTML = "";
        files = e.target.files;

        for (var i = 0; i < files.length; i++) {
            //if (i == 0) { selDiv.innerHTML = ""; storedFiles = []; }
            var f = files[i];
            selDiv.innerHTML += "<div>" + f.name + "<a onclick='removeAtt(this)'> X </a></div>";
            storedFiles.push(f.name);
        }
        $('#@Html.IdFor(model => model.images)').val(storedFiles);
    }

    function removeAtt(t) {
        var serEle = $(t).parent().text().slice(0, -3);
        var index = storedFiles.indexOf(serEle);
        if (index !== -1) {
            storedFiles.splice(index, 1);
        }
        $(t).parent().remove();

        $('#@Html.IdFor(model => model.images)').val(storedFiles);

    }
</script>
    }